<template>
  <div class="scan-background">
    <canvas ref="canvasRef"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'

const props = defineProps({
  config: {
    type: Object,
    default: () => ({
      color: '#00d4ff',
      speed: 'medium',
      style: 'horizontal'
    })
  }
})

const canvasRef = ref(null)
let ctx = null
let animationId = null
let position = 0
let angle = 0

const getSpeed = () => {
  const speedMap = {
    slow: 1,
    medium: 2,
    fast: 3
  }
  return speedMap[props.config.speed] || 2
}

const drawHorizontalScan = () => {
  if (!ctx || !canvasRef.value) return

  const { width, height } = canvasRef.value

  // 网格背景
  ctx.strokeStyle = 'rgba(0, 212, 255, 0.1)'
  ctx.lineWidth = 1
  
  // 垂直线
  for (let x = 0; x < width; x += 40) {
    ctx.beginPath()
    ctx.moveTo(x, 0)
    ctx.lineTo(x, height)
    ctx.stroke()
  }
  
  // 水平线
  for (let y = 0; y < height; y += 40) {
    ctx.beginPath()
    ctx.moveTo(0, y)
    ctx.lineTo(width, y)
    ctx.stroke()
  }

  // 扫描线
  const scanY = position % height
  const gradient = ctx.createLinearGradient(0, scanY - 50, 0, scanY + 50)
  gradient.addColorStop(0, props.config.color + '00')
  gradient.addColorStop(0.5, props.config.color + 'ff')
  gradient.addColorStop(1, props.config.color + '00')

  ctx.fillStyle = gradient
  ctx.fillRect(0, scanY - 50, width, 100)

  // 扫描线边缘
  ctx.strokeStyle = props.config.color
  ctx.lineWidth = 2
  ctx.beginPath()
  ctx.moveTo(0, scanY)
  ctx.lineTo(width, scanY)
  ctx.stroke()
}

const drawRadarScan = () => {
  if (!ctx || !canvasRef.value) return

  const { width, height } = canvasRef.value
  const centerX = width / 2
  const centerY = height / 2
  const radius = Math.min(width, height) * 0.4

  // 雷达圆环
  ctx.strokeStyle = 'rgba(0, 255, 0, 0.2)'
  ctx.lineWidth = 1
  
  for (let r = 50; r < radius; r += 50) {
    ctx.beginPath()
    ctx.arc(centerX, centerY, r, 0, Math.PI * 2)
    ctx.stroke()
  }

  // 十字线
  ctx.beginPath()
  ctx.moveTo(centerX, centerY - radius)
  ctx.lineTo(centerX, centerY + radius)
  ctx.moveTo(centerX - radius, centerY)
  ctx.lineTo(centerX + radius, centerY)
  ctx.stroke()

  // 雷达扫描扇形
  const gradient = ctx.createConicGradient(angle, centerX, centerY)
  gradient.addColorStop(0, props.config.color + 'ff')
  gradient.addColorStop(0.1, props.config.color + '88')
  gradient.addColorStop(0.3, props.config.color + '00')

  ctx.fillStyle = gradient
  ctx.beginPath()
  ctx.moveTo(centerX, centerY)
  ctx.arc(centerX, centerY, radius, 0, Math.PI * 2)
  ctx.fill()

  // 扫描线
  ctx.strokeStyle = props.config.color
  ctx.lineWidth = 3
  ctx.beginPath()
  ctx.moveTo(centerX, centerY)
  ctx.lineTo(
    centerX + Math.cos(angle) * radius,
    centerY + Math.sin(angle) * radius
  )
  ctx.stroke()
}

const animate = () => {
  if (!ctx || !canvasRef.value) return

  ctx.fillStyle = 'rgba(0, 0, 0, 1)'
  ctx.fillRect(0, 0, canvasRef.value.width, canvasRef.value.height)

  if (props.config.style === 'horizontal') {
    drawHorizontalScan()
    position += getSpeed()
  } else if (props.config.style === 'radar') {
    drawRadarScan()
    angle += 0.02 * getSpeed()
  }

  animationId = requestAnimationFrame(animate)
}

const init = () => {
  const canvas = canvasRef.value
  if (!canvas) return

  canvas.width = canvas.offsetWidth
  canvas.height = canvas.offsetHeight
  ctx = canvas.getContext('2d')

  position = 0
  angle = 0
}

const handleResize = () => {
  init()
}

onMounted(() => {
  init()
  animate()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  if (animationId) {
    cancelAnimationFrame(animationId)
  }
  window.removeEventListener('resize', handleResize)
})

watch(() => props.config, () => {
  init()
}, { deep: true })
</script>

<style scoped>
.scan-background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #000000;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}
</style>

